<template>
	<view class="detail">
		<!-- 标题 -->
		<view class="title">
			{{detailList.title}}
		</view>
		<!-- 时间 -->
		<view class="nav">
			<!-- 编辑 -->
			<view class="">
				<text>编辑:{{detailList.author}}</text>
			</view>

			<view class="">
				<!-- 发布时间 -->
				<text>发布时间:{{detailList.posttime}}</text>
			</view>

		</view>
		<!-- 内容 -->
		<view class="content" v-html="detailList.content">

		</view>
		<!-- 结束 -->
		<view class="end">
			<text>已经到底已经到底已经到底</text>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				detailList: [],
				historyList: []
			};
		},
		onLoad(e) {
			// console.log(e)
			this.options = e
			this.getdetail()
		},
		methods: {
			getdetail() {
				uni.request({
					url: "https://ku.qingnian8.com/dataApi/news/detail.php",
					data: this.options,
					success: res => {
						// console.log(res)
						res.data.content = res.data.content.replace(/<img/gi, '<img style="max-width:100%"')

						res.data.looktime = this.getTime(new Date())

						this.detailList = res.data
						// console.log(res)
						// console.log(this.historyList)
						// console.log(Array.isArray(res.data))
						this.saveNewList()
					}
				})

			},
			//存储历史记录在浏览器
			saveNewList() {
				this.historyList = uni.getStorageSync("historyList") || []
				let index = this.historyList.findIndex(i => {
					return i.id == this.detailList.id
				})
				// index 从0开始 所以要包含0
				if (index >= 0) this.historyList.splice(index, 1)
				this.historyList.unshift(this.detailList)
				uni.setStorageSync("historyList", this.historyList)
				// console.log(historyList)
			},
			// 时间转换
			getTime(e) {
				const dateStr = e
				const date = new Date(dateStr);

				const year = date.getUTCFullYear();
				const month = date.getUTCMonth() + 1; // 月份从0开始，需要加1
				const day = date.getUTCDate();
				const hours = date.getUTCHours();
				const minutes = date.getUTCMinutes();
				const seconds = date.getUTCSeconds();

				const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
				// console.log(formattedDate);
				return formattedDate
			},
		}
	}
</script>

<style lang="scss">
	.detail {
		padding: 15rpx 15rpx;
		margin: 20rpx auto;

		.title {
			font-size: 46rpx;

		}

		.nav {
			margin: 20rpx auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			// border: solid red 1rpx;
			background: #F6F6F6;

		}

		.content {
			font-size: 36rpx;


		}

		.end {
			margin: 0 auto;
			text-align: center;
			font-size: 25rpx;

		}
	}
</style>